<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>document</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <div id="root">
        <h1>学校信息</h1>
        <h2>名称：{{name}}</h2>
        <h2>地址：{{address}}</h2>
        <hr/>
        <button @click="addSex">添加一个性别属性，默认为男</button>
        <h1>学生信息</h1>
        <h2>姓名：{{student.name}}</h2>
        <h2 v-if="student.sex">学生性别：{{student.sex}}</h2>
        <h2>年龄：真实{{student.age.rAge}} 对外{{student.age.sAge}}</h2>
        <h2>朋友们</h2>
        <ul>
            <li v-for="(f,index) in student.friends" :key="index">
                {{f.name}}--{{f.age}}
            </li>
        </ul>
       
    </div>
    <script>
        Vue.config.productionTip = false
        //new Vue()时，vue会
        //1.加工data，给data的所有key添加get set方法
        //2.vm._data=data
        let vm = new Vue({
            el: "#root", 
            data: { 
                name:'atgg',
                address: 'bj',
                student: {
                    name: 'tom',
                    // sex: '男', //这个属性在项目启动之后，需要时再加上
                    age: {
                        rAge: 40, //真实年龄
                        sAge: 29, //对外年龄
                    },
                    friends: [
                        {
                            name: 'jerry',
                            age: 35,
                        },
                        {
                            name: 'tony',
                            age: 30,
                        }
                    ]
                }
            },
            methods: {
                addSex(){
                    Vue.set(this.student, 'sex', '男')
                    // this.$set(this.student, 'sex', '男') //一样的效果
                }
            },
        })

        //这样给data新增属性时不会被vue监测，即不是响应式属性
        // vm._data.student.sex = '男'
        //使用Vue.set(target, key, val) 可以添加响应式数据
        // Vue.set(vm._data.student, 'sex', '男')
        //使用vm.$set() 可以添加响应式数据，作用同Vue.set
        // vm.$set(vm._data.student, 'sex', '男')
        console.log(vm._data)

        //Vue.set不能直接给data添加一级属性，这句报错
        // Vue.set(vm._data, 'leader', '张校长')
    </script>
</body>
</html>